<template>
    <div class="admin-search-panel" ref="panel" @click="onClick">
        <div class="admin-search-select">
            <el-select
                    class="admin-search"
                    v-model="selected"
                    :filterable="true"
                    :remote="true"
                    :loading="loading"
                    @change="onSelectChange"
                    @blur="onBlur"
                    :remote-method="onSearch" ref="select"
                    :placeholder="placeHolders[searchType]">

                <el-option-group
                        v-if="searchType === 0"
                        v-for="(item,key) in opts.results" :value="key" :label="groupName(key)">
                    <admin-search-option :type="key" :item="item"></admin-search-option>
                </el-option-group>
                <admin-search-option
                    v-if="searchType !== 0"
                    :type="searchType" :item="typeOpts"
                    class="item-only"
                ></admin-search-option>

            </el-select>
        </div>
        <div class="admin-search-button" v-if="showType">
            <div class="button-panel">
                <span class="link" v-if="!typeSelect">
                    |&nbsp{{labels[searchType]}}
                </span>
                <el-dropdown
                        v-if="typeSelect"
                    trigger="click"
                    @command="onCommand"
                >
                    <span class="el-dropdown-link link">
                        |&nbsp{{labels[searchType]}}
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item class="link"
                            v-for="(label,index) in labels"
                            :command="index"
                        >{{label}}</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>


        </div>
    </div>

</template>

<script lang="ts">

    import {Vue, Component, Prop} from 'vue-property-decorator'
    import {Api} from '@/api/meta'
    import AdminSearchOption from './AdminSearchOption'


    @Component({
        name: "AdminSearch",
        components: {
            AdminSearchOption
        }
    })
    export default class AdminSearch extends Vue {

        opts: Api.Meta.SearchResponse = {
            type: Api.Meta.SearchType.ALL,
            results: {}
        };

        typeOpts = {
            records:[]
        };
        selected = "";
        searchType= 0;
        labels = [ "全部", "用户", "明星", "粉丝站"];
        placeHolders = [
            "ID/用户/明星/粉丝站/手机号 - [拼音/中文]",
            "ID/用户 - [拼音/中文]",
            "ID/明星 - [拼音/中文]",
            "ID/粉丝站 - [拼音/中文]"
        ];
        loading = false;

        @Prop({
            type:Boolean,
            default:true,
        })
        showType;

        @Prop({
            type:Number,
            default:0,
        })
        type;

        @Prop({
            type:Boolean,
            default:true,
        })
        typeSelect;

        groupName(value) {
            return this.labels[value]
        }

        cleanData() {

            this.typeOpts = {
                records:[],
            };
            this.opts = {
                type:0,
                results:{},
            };

            this.selected = "";
        }
        loadView(value) {

            this.loading = true;
            Api.Meta.Search({
                type: this.searchType,
                search: value,
            }).then((ack) => {

                this.loading = false;

                if(this.searchType === 0) {
                    this.cleanData();
                    this.opts = ack;
                }else{
                    this.cleanData();
                    this.typeOpts = ack.results[`${this.searchType}`];
                }
            }).catch(()=>{this.loading = false})
        }

        findInRecords(id:string,records: Array<Api.Meta.SearchResponse_Record>): any {

            let f: any = records.find((value) => {
                return value.id === id;
            });

            if(f === undefined) {
                return null
            }

            return f
        }

        findValue(id:string): Api.Meta.SearchResponse_Record {
            if(this.searchType === 0) {

                let o = this.opts.results;

                let keys = Object.keys(this.opts.results);

                for(let key:string in keys) {

                    let records:any = o[keys[key]].records;
                    let value = this.findInRecords(id, records);

                    if(value !== null) {
                        return value
                    }
                }
            }else{

                if(this.typeOpts.records){
                    return this.findInRecords(id,this.typeOpts.records)
                }

            }
        }

        onSelectChange(value:string) {

            let item:any = this.findValue(value);

            if(value !== null) {
                this.$emit('change', item)
            }

            this.cleanData();

        }

        onBlur(args) {
            this.$emit('blur',args)
        }

        onSearch(value) {
            this.loadView(value)
        }

        onCommand(cmd) {
            this.cleanData();
            this.searchType=cmd;
        }

        mounted() {
            this.searchType = this.type;
        }

        onClick() {
            console.log("click");
            this.selected = "";
            let ref:any = this.$refs['select'];
            ref.focus()
        }
    }
</script>

<style lang="scss" scoped>

    .admin-search-select {
        width: inherit;
    }

    .link {
        font-size: xx-small;
    }

    .item-only {
        padding-left: 20px;
    }

    .admin-search-button {
        position: relative;
        right: 50px;
        display: flex;
        align-items: center;
        .button-panel {
            width: 100px;
            font-size: small;

            &:hover {
                cursor:pointer;
            }


        }


    }

    .admin-search-panel {
        width: 400px;
        display: flex;
        flex-direction: row;
    }

    .admin-search-option {
        padding: 0px;
    }

    .admin-search {
        width: inherit;
    }
</style>